<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="alpine.min.js"></script>
</head>
<body>
    <div x-data="{ open: false }">
        <button @click="open = true">Open Dropdown</button>

        <ul
                x-show="open"
                @click.away="open = false"
        >
            Dropdown Body
        </ul>
    </div>

<hr>
    <div x-data="{ tab: 'foo' }">
        <button  @click="tab = 'foo'">Foo</button>
        <button  @click="tab = 'bar'">Bar</button>

        <div x-show="tab === 'foo'">Tab Foo</div>
        <div x-show="tab === 'bar'">Tab Bar</div>
    </div>

<hr>

    <div x-data="{ open: false }">
        <button
                @mouseenter.once="
            fetch('../base.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
                @click="open = true"
        >Show Dropdown</button>

        <div x-ref="dropdown" x-show="open" @click.away="open = false">
            Loading Spinner...
        </div>

        <hr>
        <div x-data="dropdown()">
            <button x-on:click="open">Open</button>

            <div x-show="isOpen()" x-on:click.away="close" style="background-color: red">
                内容
            </div>
        </div>
        <script>
            // Dropdown
        function dropdown() {
        return {
        show: false,
        open() { this.show = true },
        close() { this.show = false },
        isOpen() { return this.show === true },
        }
        }
        </script>
    </div>
</body>
</html>